<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <style type="text/css">
	        .ok{
	          color: green;
	        }
	        .error{
	          color: red;
	        }
     	  </style>
	</head>
	<body>
		 名字： <input type="text" id="name" onblur="checkName()" />
	     <span id="nameMsg">5-10位字母、数字、下划线</span>
	     <span id="nameExistMsg"></span>
	     <br/>
	        邮箱： <input type="text" id="email" onblur="checkEmail()" />
	     <span id="emailMsg">必须符合邮箱的格式</span>
	     
     	<script src="${pageContext.request.contextPath}/lib/jquery/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
     	<script type="text/javascript">
			function checkName() {
				var name = $("#name").val();
				var nameMsgSpan = $("#nameMsg");
				var reg = /\w{5,10}/;
				if (name.match(reg)) {
					nameMsgSpan.removeClass("error");
					nameMsgSpan.addClass("ok");
				} else {
					nameMsgSpan.removeClass("ok");
					nameMsgSpan.addClass("error");
					$("#nameExistMsg").html("");
					//js正则表达式验证非法，直接返回，不需要通过ajax验证用户名是否存在
					return;
				}
				
				//ajax请求验证这个用户名是否存在
				$.post("${pageContext.request.contextPath}/ajax2", 
					{"name":name}, 
					function(data) {
						//{"isExist":isExist}
						if(data.isExist) {
							$("#nameExistMsg").html("该用户已经存在");
							$("#nameExistMsg").css("color", "red");
						} else {
							$("#nameExistMsg").html("该用户可以使用");
							$("#nameExistMsg").css("color", "green");
						}
					}, 
					"json");
			}
		</script>
	</body>
</html>